HTML5 原生拖放

发展

原生拖放的发展大致可分为三个阶段：IE4、IE5+、HTML5。

IE4 是最早在网页中引入 JavaScript 拖放功能的，当时只有图像和选中的文本可以拖放，并且只有文本框是有效的放置目标。
IE5 拖放功能进一步得到了扩展，添加了新的事件，几乎网页中的任何元素都可以作为放置目标。
IE5.5+ 又更进一步，让网页中的任何元素都可以拖放。
HTML5 在 IE 的实例基础上，进一步制定了拖放的规范。

Firefox 3.5+、Safari 3+、Chrome、Opera 12+也根据 HTML5 规范实现了原生拖放功能。

拖放事件

在进行拖放操作的不同阶段会触发数种事件。注意，在拖拽的时候只会触发拖拽的相关事件，鼠标事件，例如 mousemove，是不会触发的。当从操作系统拖拽文件到浏览器的时候，dragstart 和 dragend 事件不会触发。

拖动某元素时，依次触发以下事件

dragstart
当一个元素被拖拽的时候触发。

drag
触发 dragstart 后，随即会触发 drag 事件，而且在元素被拖动期间会持续触发该事件。

dragend
拖动停止时触发。（无论元素是放到了有效的放置目标还是无效的放置目标上）

元素拖放到有效的放置目标上时，依次触发以下事件

dragenter
元素被拖放到放置目标上触发。

dragover
被拖动的元素在放置目标范围内移动时，会持续触发该事件。

dragleave
元素被拖出了放置目标，触发该事件，并且 dragover 事件不再发生。

drop
元素被放到了放置目标中，触发该事件。

拖放步骤

• 定义拖拽目标

• 定义拖拽数据

• （可选）设置拖动反馈图片

• 设置拖动效果

• 定义放置目标

• 拖放后的逻辑处理

定义拖拽目标

默认情况下，图像、链接和已选中的文本是可以拖动的。文本需要被选中才能拖动，而图像和链接在任何时候都可以拖动。

让其他元素可拖动也是可以的。HTML5 为所有 HTML 元素规定了一个 draggable 属性，表示是否可以拖动。图像和链接的 draggable 属性自动被设置成了 true，其他元素是 false。

// 设置图像不可拖动
<img src="http://www.seiue.com" draggable="false">

// 设置这个元素可以拖动
<div draggable="false">可拖动的DIV</div>

支持 draggable 属性的浏览器有 IE 10+、Firefox 4+、Safari 5+、Chrome 和 Opera 12+。

定义拖拽数据

我们有时会需要在拖放操作时进行数据交换，IE 引入了 dataTransfer对象，它是事件对象的一个属性，用于从被拖动元素向放置目标传递数据。因为它是事件对象的属性，所以只能在拖放事件中访问，不能单独创建。目前，HTML5 规范也收入了 dataTransfer 对象。

实现数据交换主要用到两个方法：getData(type)和setData(type, data)。type表示保存的数据类型，取值为“text”或“URL”，getData() 通过 setData() 设置的 type 来取到保存的值。

function dragStart(e) {
    // 设置文本数据
    e.dataTransfer.setData('text', 'hello world');
    // 设置URL
    e.dataTransfer.setData('URL', 'www.seiue.com');
}

function drop(e) {
    // 接收文本数据
    var text = e.dataTransfer.getData('text');
    // 接收URL
    var url = e.dataTransfer.getData('URL');
}

drag.addEventListener('dragStart', dragEnter, false);
drop.addEventListener('drop', drop, false);

建议总是添加 text/plain和text/uri-list来替代text和URL，因为后者存在兼容问题并且最终会被映射为前者。

设置拖动反馈图片

当发生一次拖拽时（dragstart 事件触发的元素），会在拖拽的元素处产生一个半透明的图片（该元素副本），并且会在拖拽过程中跟随鼠标移动，这就是反馈图片。这个图片是自动生成的，无需你亲自设定，但可以通过setDrawImage来自定义一个反馈图片。

setDrawImage是 dataTransfer 对象的一个方法。

event.dataTransfer.setDrawImage(image, xOffset, yOffset)

需要传入三个参数，分别是：一个图片的引用（可以是图片元素对象、canvas或其他元素对象），图像内的水平偏移量，图像内的垂直偏移量。下面的例子定义了一个反馈图片。

function dragCustomImage(e) {
  var img = document.createElement('img')
  img.setAttribute('src', 'drag-img.jpeg')

     e.dataTransfer.setDragImage(img, 150, 150)
}

设置拖动效果

dataTransfer 对象不光能够传输数据，还能通过它来确定被拖动元素以及防止目标元素能够接收什么操作。主要用到两个属性：dropEffect和effectAllowed。

dropEffect

可以知道被拖动的元素能够执行哪种放置操作。这个属性有4个值。

• none: 禁止把拖放的元素放在这里。

• move: 可以把拖放的元素移动到放置目标。

• copy: 可以把拖放的元素复制到放置目标。

• link: 放置目标会打开拖动的元素（拖动的元素必须是一个链接，有URL）。

把元素拖放到放置目标时，以上的每个值都会导致光标显示不同的符号。每种操作触发什么样的行为需要你来自行实现，浏览器不会帮你移动、复制和打开链接。要使用 dropEffect，我们需要在 dragenter事件处理程序中设置它的属性。

effectAllowed

dropEffect 属性需要搭配 effectAllowed 属性才生效。effectAllowed 属性表示允许拖动元素的哪种 dropEffect。effectAllowed 有以下值。

• none: 被拖动的元素不能有任何行为。

• copy: 只允许值为”copy“的 dropEffect。

• link: 只允许值为“link” 的 dropEffect。

• move: 只允许值为“move”的 dropEffect。

• copyLink: 允许值为“copy”和“link”的 dropEffect。

• copyMove: 允许值为“copy”和“move”的 dropEffect。

• linkMove: 允许值为“link”和“move“的 dropEffect。

• all: 允许任意 dropEffect。

需要在dragstart事件处理程序中设置它的属性。

定义放置目标

所有元素都支持放置目标事件，但这些元素默认是不允许放置的。如果拖动的元素拖放到了不允许放置的元素，是不会触发drop 事件的。
把元素变成有效的放置目标，需要重写dragenter和dragover事件的默认行为。

var dropTarget = document.getElementById('dropTarget');

dropTarget.addEventListener('dragenter', function(e) {
    e.preventDefault();
}, false);

dropTarget.addEventListener('dragover', function(e) {
    e.preventDefault();
}, false);

处理拖放后的做的事情

在drop事件发生时做一些事情，你可能想要获取拖拽目标携带的数据并做某些相应的事情。

参考资料

• 拖放操作 | MDN

• 拖拽操作 | MDN

• DataTransfer | MDN

• 拖拽类型列表 | MDN

• JavaScript高级程序设计（第3版）第16章 HTML5 脚本编程 - 原生拖放